<template>
  <div class="collect-list">
    <van-nav-bar
      title="我的足迹"
      left-text="返回"
      left-arrow
      @click-left="back"
    >
      <template #left>
        <van-icon name="arrow-left" size="20" color="#E65D6E"/>
      </template>
    </van-nav-bar>
    <van-list
      style="background: #f3f3f3"
      class="reserve-list"
              v-model="loading"
              :finished="finished"
              :finishedText="finishedText"
              @load="onLoad"
    >
      <div v-for="(traces,key,index) in list" :key="index">
        <div>{{key}}</div>
        <div class="reserve-item" >
          <div class="  reserve-card"  v-for="(item,tag) in traces" :key="tag" @click="$router.push({name:'detail',params:{id:item.goodsId}})">
            <van-image width="100" height="100" lazy-load
                       :src="item.picUrl"/>
            <div class="pro-info">
              <span>¥<span class="reserve-num">{{item.retailPrice}}</span></span>
            </div>

          </div>
        </div>
      </div>
    </van-list>

  </div>
</template>

<script>
import {footprintList} from '../../api/user'

export default {
  name: 'traces',
  data () {
    return {
      list: {},
      pages: -1,
      page: 0,
      loading: false,
      finished: false,
      finishedText: '没有更多了'
    }
  },
  methods: {
    back () {
      this.$router.back()
    },
    onLoad () {
      if (this.pages >= this.page) {
        this.finished = true
      } else {
        footprintList({page: this.page}).then(res => {
          let data = res.data.data
          this.loading = false
          this.pages = data.pages
          console.log('data.list')
          console.log(data.list)
          console.log('data.list')
          data.list.forEach(item => {
            let groupName = item.addTime.split(' ')[0]
            if (groupName in this.list) {
              let group = this.list[groupName]
              group.push(item)
            } else {
              this.list[groupName] = [item]
            }
          })
        })
        this.page++
      }
    }
  }
}
</script>

<style scoped>
.collect-list {
  flex: 1;
  height: 100%;
}

.reserve-list {
  padding: 10px;
}

.reserve-item {
  overflow: hidden;
}

.reserve-card {
  float: left;
  margin: 5px 5px;
  width: calc(100% / 3 - 30px);
}

.reserve-card {
  background-color: white;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
  margin-top: 10px;
  font-size: 12px;
  color: #E65D6E;
}

.reserve-num {
  font-size: 18px;
}

.pro-info {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.sold-count {
  font-size: 10px;
  color: #c5c5c5;
}
</style>
